// 点击评论展开详细信息并发送ajax请求
var assess = document.getElementsByClassName("assess");
var news = document.getElementsByClassName("news");

var commentBtn = document.getElementsByClassName("comment-btn");
for (let i = 0; i < assess.length; i++) {
  assess.num = i;
  news.num = i;
  commentBtn.num = i;
}
let click = 0;
for (let i = 0; i < assess.length; i++) {
  assess[i].onclick = function () {
    let bid = assess[i].getAttribute("bid");

    let spread = news[i].querySelector(".spread");
    if (click == 0) {
      spread.style.display = "block";
      click = 1;
    } else {
      click = 0;
      spread.style.display = "none";
    }
    // 点击更多回复，显示数据的思路
    // 由于接口需要传递文章id,则需要属性来记录文章id来获取评论所有数据
    // 再获取当前按钮所在一级评论的索引值,才能获取
    // 发送ajax请求
    $.ajax({
      url: `/weibo/blog/getBlogComment?id=${bid}`,
      type: "get",
      success: function (result) {
        console.log(result);
        let comment = news[i].querySelector(".comment");

        comment.innerHTML = "";
        for (let i = 0; i < result.length; i++) {
          // 二级评论的数据（数组）
          if (result[i].likes == 0) {
            result[i].likes = "";
          }
          comment.innerHTML =
            comment.innerHTML +
            ` <div class="item1" >
                <div class="comment-list">
                  <a href="">
                   <div class="comment-head">
                      <img
                       
                        src="${result[i].userAvatarUrl}"
                        alt=""
                       />
                    </div>
                  </a>
                  <div class="comment-details">
                    <a href="" class="comment-name"> <span>${result[i].username}</span> </a>:
                    <span class="c-content">${result[i].comment}</span>
                  <div class="comment-bottom">
                     <div class="c-time">${result[i].publishTime}   ${result[i].address}</div>
                     <div class="comment-fn">
                        <div class="c-complain">
                          <i class="iconfont">&#xe6a9;</i>
                        </div>
                        <div class="reply">
                          <i class="iconfont">&#xe695;</i>
                        </div>
                        <div class="c-like">
                          <i class="iconfont">&#xe600;</i>${result[i].likes}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
             `;
          let list = result[i].list;
          if (list.length > 0) {
            for (let j = 0; j < 1; j++) {
              comment.innerHTML =
                comment.innerHTML +
                `<div class="list2">
              <div class="list2-bar"></div>
              <div class="list2-details">
                <a href="" class="list2-name"><span>${list[i].username}:</span></a>
                <span class="list2-content">${list[i].comment}</span>
              </div>
              <div class="list2-bottom">
                <div class="list2-time">${list[i].publishTime}  ${list[i].address}</div>
              </div>
            </div>`;
            }
          }

          // 下面循环结尾多一个</div>是对item1进行结尾
          if (list.length > 1) {
            comment.innerHTML =
              comment.innerHTML +
              `<div class="list2">
              <div class="list2-bar"></div>
                   <a href="javascript:;" class="more-reply" id=${bid} index=${i}>共${list.length}条回复</a>
                   <i class="iconfont">&#xe62e;</i>
                 </div>
               </div>`;
          } else {
            comment.innerHTML = comment.innerHTML + `</div>`;
          }
        }

        more();
        ban();
      },
      error: function () {
        console.log("失败");
      },
    });
  };
}
let commentddl = document.getElementsByClassName("comment-ddl");
let commentText = document.getElementsByClassName("comment-text");
for (let i = 0; i < commentText.length; i++) {
  commentText[i].addEventListener("input", function () {
    if (commentText[i].value == "") {
      commentBtn[i].setAttribute("disabled", true);
      commentBtn[i].classList.add("disable");
    } else {
      commentBtn[i].removeAttribute("disabled", true);
      commentBtn[i].classList.remove("disable");
    }

    this.style.height = `${this.scrollHeight}px`;
    // commentBtn[i].onclick;
  });
  commentText[i].onkeyup = function () {
    commentddl[i].innerHTML = `还可输入${140 - commentText[i].value.length}字`;
    if (commentText[i].value.length >= 140) {
      commentddl[i].innerHTML = "还可输入0字";
      commentText[i].value = commentText[i].value.substr(0, 140);
    }
  };
}

let replybutton = document.querySelector(".reply-btn");
replybutton.onclick = function () {
  showCustomAlert("请先进行登录!");
};

// 搜索框获得焦点，展出下拉部分
let searchList = document.querySelector(".search-list");
let topinput = document.querySelector("#top-input");
let icon = document.querySelector(".top-search").querySelector(".iconfont");
topinput.addEventListener("blur", function () {
  searchList.style.display = "none";
  icon.style.color = "black";
});
topinput.addEventListener("focus", function () {
  searchList.style.display = "block";
  icon.style.color = "#ff8200";
});

// 关注
let attention = document.getElementsByClassName("top-attention");
for (let i = 0; i < attention.length; i++) {
  let btn = attention[i].querySelector(".top-attention-btn");
  btn.onclick = function () {
    return showCustomAlert("请先登录再进行该操作");
  };
}

// let attention = document.getElementsByClassName("top-attention");
// for (let i = 0; i < attention.length; i++) {
//   let btn = attention[i].querySelector(".top-attention-btn");
//   btn.onclick = function () {
//     btn.innerHTML = `
//     <i class="iconfont">&#xe664;</i>已经关注
//   `;
//     btn.setAttribute("disabled", true);
//     btn.classList.add("already");
//     attention[i].style.pointEvents = "none";
//   };
// }
// 未登录进行操作时禁止操作
// 点赞禁止
let likes = document.getElementsByClassName("like");

let shares = document.getElementsByClassName("share");
for (let i = 0; i < likes.length; i++) {
  likes[i].onclick = function () {
    return showCustomAlert("请先进行登录");
  };
  shares[i].onclick = function () {
    return showCustomAlert("请先进行登录");
  };
}
let fn = document.getElementsByClassName("fn");
for (let i = 0; i < fn.length; i++) {
  fn[i].onclick = function () {
    return showCustomAlert("请先进行登录");
  };
}

// 由于评论展开前页面无法获取该元素
// 则使用方法包装之后在aiax请求中引用
function ban() {
  let cCompalin = document.getElementsByClassName("c-complain");
  let cLike = document.getElementsByClassName("c-like");
  let reply = document.getElementsByClassName("reply");
  for (let i = 0; i < reply.length; i++) {
    reply[i].onclick = function () {
      return showCustomAlert("请先登录再进行该操作");
    };
    cLike[i].onclick = function () {
      return showCustomAlert("请先登录再进行该操作");
    };
    cCompalin[i].onclick = function () {
      return showCustomAlert("请先登录再进行该操作");
    };
  }
}

// 更多回复的弹窗
function more() {
  let moreReply = document.getElementsByClassName("more-reply");
  let moreMask = document.querySelector(".more-reply-mask");
  console.log(moreReply);
  for (let i = 0; i < moreReply.length; i++) {
    moreReply[i].onclick = function () {
      console.log(111);
      let val = moreReply[i].getAttribute("id");
      let index = moreReply[i].getAttribute("index");
      moreMask.style.display = "flex";
      document.body.style.overflow = "hidden";
      let contentComment = moreMask.querySelector(".content-comment");
      // 获取ajax请求,显示评论
      $.ajax({
        url: `/weibo/blog/getBlogComment?id=${val}`,
        type: "get",
        success: function (result) {
          console.log("弹窗成功");
          // 一级及二级评论的数据
          let item1 = result[index];
          let list = item1.list;
          contentComment.innerHTML = " ";
          contentComment.innerHTML =
            contentComment.innerHTML +
            `<div class="window-item1">
            <div class="item1-list">
          <a href="">
            <div class="item1-head">
              <img src="${item1.userAvatarUrl}" alt="" />
            </div>
          </a>
          <div class="item1-details">
            <a href="" class="details-name"><span>${item1.username}</span></a>
            <span>:</span>
            <span class="details-content">${item1.comment}</span>
            <div class="item1-bottom">
              <div class="bottom-time">${item1.publishTime}  ${item1.address}</div>
            </div>
          </div>
        </div>
        </div>`;
          for (let j = 0; j < list.length; j++) {
            contentComment.innerHTML =
              contentComment.innerHTML +
              ` <div class="window-list2">
            <div class="window-list2-bar"></div>
            <div class="window-list2-details">
              <a href="" class="window-list2-name">
                <span>${list[j].username}</span>
                <span>:</span>
              </a>
              <span class="window-list2-content">${list[j].comment} </span>
            </div>
            <div class="window-list2-bottom">
              <div class="window-list2-time">${list[j].publishTime}${list[j].address}</div>
            </div>
          </div>`;
          }
        },
        error: function (error) {
          console.log("失败");
        },
      });
    };
  }
  // 取消回复弹窗
  let windowCancel = document.querySelector(".window-top-cancel");
  windowCancel.onclick = function () {
    moreMask.style.display = "none";
    document.body.style.overflow = "inherit";
  };
  console.log("成功");
}

//监听搜索框输入的值来获取后端返回的数据并渲染
let searchInput = document.querySelector("#top-input");
searchInput.addEventListener("input", function () {
  let searchText = searchInput.value;
  $.ajax({
    url: `/blog/searchBlog?condition=${searchText}`,
    method: "get",

    success: function (result) {
      console.log("搜索成功");

    },
    error: function (result) {
      console.log("搜索失败");
    },
  });
});

let hotList=document.getElementsByClassName("hot-list");
for (let i = 0; i < hotList.length; i++) {
  hotList[i].onclick=function (){
    return showCustomAlert("请先登录再进行该操作")
  }
}